<template>
    <div class="module-card">
        <div class="module-header">
            <h2 class="module-title">系统性能</h2>
            <div class="text-sm text-gray-500">实时监控</div>
        </div>
        <div class="p-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-sm">CPU 使用率</span>
                        <span class="text-sm font-medium">{{ systemMetrics.cpu }}%</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2">
                        <div class="h-2 rounded-full" :class="getMetricColorClass(systemMetrics.cpu)"
                            :style="{ width: systemMetrics.cpu + '%' }"></div>
                    </div>
                </div>
                
                <div>
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-sm">内存使用率</span>
                        <span class="text-sm font-medium">{{ systemMetrics.memory }}%</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2">
                        <div class="h-2 rounded-full" :class="getMetricColorClass(systemMetrics.memory)"
                            :style="{ width: systemMetrics.memory + '%' }"></div>
                    </div>
                </div>
                
                <div>
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-sm">磁盘 I/O</span>
                        <span class="text-sm font-medium">{{ systemMetrics.diskIO }}</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2">
                        <div class="h-2 rounded-full" :class="getMetricColorClass(systemMetrics.diskIOValue)"
                            :style="{ width: systemMetrics.diskIOValue + '%' }"></div>
                    </div>
                </div>
                
                <div>
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-sm">网络带宽</span>
                        <span class="text-sm font-medium">{{ systemMetrics.network }}</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2">
                        <div class="h-2 rounded-full" :class="getMetricColorClass(systemMetrics.networkValue)"
                            :style="{ width: systemMetrics.networkValue + '%' }"></div>
                    </div>
                </div>
            </div>
            
            <div class="mt-4 pt-4 border-t border-gray-100">
                <div class="text-sm font-medium mb-3">响应时间</div>
                <div class="h-32" ref="responseTimeChart"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default {
    name: 'SystemPerformance',
    setup() {
        const responseTimeChart = ref(null);
        let chartInstance = null;

        // 系统性能指标
        const systemMetrics = {
            cpu: 65,
            memory: 78,
            diskIO: '4.2 MB/s',
            diskIOValue: 42,
            network: '12.8 Mbps',
            networkValue: 68
        };

        // 获取指标颜色类
        const getMetricColorClass = (value) => {
            if (value < 50) return 'bg-success';
            if (value < 80) return 'bg-warning';
            return 'bg-danger';
        };

        // 初始化响应时间图表
        const initResponseTimeChart = () => {
            if (chartInstance) {
                chartInstance.dispose();
            }
            
            chartInstance = echarts.init(responseTimeChart.value);
            
            const option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}: {c} ms'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['0s', '10s', '20s', '30s', '40s', '50s', '60s'],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    beginAtZero: true,
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    }
                },
                series: [{
                    name: '响应时间',
                    type: 'line',
                    data: [45, 59, 42, 65, 56, 49, 52],
                    lineStyle: {
                        color: '#165DFF'
                    },
                    symbol: 'circle',
                    symbolSize: 4,
                    itemStyle: {
                        color: '#165DFF'
                    }
                }]
            };
            
            chartInstance.setOption(option);
        };

        // 窗口大小变化处理
        const handleResize = () => {
            chartInstance?.resize();
        };

        onMounted(() => {
            initResponseTimeChart();
            window.addEventListener('resize', handleResize);
        });

        onBeforeUnmount(() => {
            window.removeEventListener('resize', handleResize);
            if (chartInstance) {
                chartInstance.dispose();
            }
        });

        return {
            systemMetrics,
            responseTimeChart,
            getMetricColorClass
        };
    }
}
</script>